<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1,user-scalable=no">
    <title>18附加导航插件 </title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        a:focus{
            outline: none;
        }
        .nav-pills{
            /* 修改下导航栏的固定长度  重写CSS样式 */
            width: 150px;   
        }
        .nav-pills.affix{
            /* 最后还要设置这里的距离 拖动的滚动才会有效果 */
            top: 30px;  
        }
    </style>
</head>

<!-- 还有要绑定区域啊还有滚动 否则无法显示拖动的文字段落属于哪个导航区域 还有绑定导航栏 -->
<body data-spy="scroll" data-target="#myScrollspy">

    <!-- 附加导航 即 粘贴在屏幕某处实现锚点功能 -->
    <div class="container">
        <div class="jumbotron" style="height:150px;">
            <h2>Bootstrap Affix</h2>
        </div>
        <div class="row">
            <!-- 导航栏占据三列  内容占据九列 -->
            <div class="col-xs-3" id="myScrollspy">
                <!-- data-spy="affix" 固定导航栏   data-offset-top设置导航栏距离屏幕顶部的距离 -->
                <!--  data-spy="affix" data-offset-top="150" 第一种方法拖动导航栏 -->
                <ul id="myAffix" class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#section-1">第一部分</a></li>
                    <li><a href="#section-2">第二部分</a></li>
                    <li><a href="#section-3">第三部分</a></li>
                    <li><a href="#section-4">第四部分</a></li>
                    <li><a href="#section-5">第五部分</a></li>
                </ul>
            </div>
            <div class="col-xs-9">
                <h2 id="section-1">第一部分</h2>
                <p style="line-height:2">第一部分陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆最帅陈伟霆陈伟霆最帅陈伟霆最帅陈伟霆最帅</p>
                <h2 id="section-2">第二部分</h2>
                <p style="line-height:2">第二部分胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅胡一天也帅</p>
                <h2 id="section-3">第三部分</h2>
                <p style="line-height:2">第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分第三部分</p>
                <h2 id="section-4">第四部分</h2>
                <p style="line-height:2">第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分第四部分</p>
                <h2 id="section-5">第五部分</h2>
                <p style="line-height:2">第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分第五部分</p>
            </div>
        </div>
    </div>
    


    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script type="text/javascript">

    // 第二种方法 替代 data-spy="affix" data-offset-top="150"
    $('#myAffix').affix({
        offset:{
            top: 150    // 默认使用的是top  也可以默认居底 bottom
        }
    });

    $('#myAffix').on('affix.bs.affix',function(){
        alert('到达顶部定位触发');
    })
    

     </script>
</body>
</html>